<template>
  <div class="home">
   <input type="text" placeholder="请输入内容"  v-model="comment" />
   <span v-html="test"></span>
   <button @click="publish">发表</button>
   <ul class="list">
      <li v-for="(item, index) in commentList" :key="index">
        {{item.comment}}
        {{item.timer}}
        <button @click="del(index)">删除</button>
        <el-button>
      </li>
    </ul>
  </div>
</template>

<script>
/*
 *在一个组件中引入另一个组件
1. 通过import引入组件
2.在vue实例对象的配置项中的components属性中添加该组件
*/ 
/**
 * vue中常用的模板指令
 * v-html 解析html标签并渲染
 * v-model 双向数据绑定
 */
export default {
  name: 'HomeView',
  data() {
    return {
      comment: '评论内容',
      test: '<a href="https://www.baidu.com">test</a>',
      commentList:[]
    }
  },
  methods: {
    publish() {
      // alert('按钮被点击了')
      // this.commentList.push(this.comment)
      let comment = this.comment;
      let timer = (new Date()).getFullYear();
      let CommentObj = {comment, timer};
      this.commentList.push(CommentObj)
    },
    del(index) {
      /*
      *删除元素：
      * 通过设置 splice() 方法的第一个参数为要删除的元素的起始位置索引，
      * 第二个参数为要删除的元素的个数，
      * 可以删除数组中的元素。
      */ 
      this.commentList.splice(index, 1)
    }
  }
}
</script>
<style>
.list{
  list-style: none;
}
</style>